<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止父级边框坍塌</title>
    <link href="css/css092.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="father" class="clear">
        <div class="layer01"><img src="images/phone-1.jpg" alt="日用品"></div>
        <div class="layer02"><img src="images/phone-2.jpg" alt="图书"></div>
        <div class="layer03"><img src="images/phone-3.jpg" alt="鞋子"></div>
        <div class="layer04">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。
这里使用这三个图片和本段文字来演示讲解在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
        </div>
        <!--01. 空div 防止父级边框塌陷-->
        <div class="clear"></div>
    </div>
</body>
</html>